<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>视频</title>
    <link rel="stylesheet" href="/Public/css/style.css">
    <link rel="stylesheet" href="/Public/css/video-js.css">
    <script src="/Public/js/jquery-1.4.4.min.js"></script>
    <script src="/Public/js/video.js"></script>
    <script>
        videojs.options.flash.swf = "video-js.swf";
    </script>
    <style>
        .videoSelect{
            width: 100%;
            text-align: center;
            font-size: 18px;
        }
        .videoSelect p{
            display: inline-block;
            margin-right: 10px;
        }
        #videotaggle{
            width: 30%;
            text-align: center;
            margin: 30px auto;
            font-size: 18px;
            border: 1px solid #757575;
            border-radius: 5px;
            padding: 5px;
        }
    </style>
</head>

<body>
    <div class="videoSelect">
    <p>视频选择:</p>
        <select name="" id="videotaggle">
            <?php if(is_array($array)): $k = 0; $__LIST__ = $array;if( count($__LIST__)==0 ) : echo "" ;else: foreach($__LIST__ as $key=>$row): $mod = ($k % 2 );++$k;?><option value="http://192.168.0.88:8080/hls/175_1_0.m3u8"><?php echo ($row['devicename']); ?></option><?php endforeach; endif; else: echo "" ;endif; ?>
            <!--<?php echo ($row['hlsplayurl']); ?>-->
    </select>
    </div>
    <video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="100%"
        height="264" poster="" data-setup="{}">
        <source src="<?php echo ($array[0]['hlsplayurl']); ?>" type='video/mp4'/>
        <track kind="captions" src="/js/captions.vtt" srclang="en" label="cn"></track>
    </video>
    <script>
        var videoArray = "<?php echo ($array[0]); ?>";
        $("#videotaggle").change(function (el){
            $('#example_video_1').empty();
            var _html = '<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none" width="100%" height="264" poster="" data-setup="{}"><source src="'+$(this).val()+'" type="video/mp4"/></video>';
            $('#example_video_1').append(_html);
        })
    </script>
</body>

</html>